<template>
    <div class="mainlandcard">
        <open-account-pregress></open-account-pregress>
        <div class="mainlandcardbox f-cb">
            <h1>{{$t('m.Videoverification')}}</h1>
            <div class="uploadVideo f-cb" v-loading="loading">
                <form action="###" id="VideoForm">
                    <input type="file"  @change="uploadVideo($event)" capture="camcorder" accept="video/*" title="">
                </form>
                <div v-if="isvideo">
                    <video :src="videoUrl" id="videoas"></video>
                    <span class="videobg"></span>
                </div>
                <div v-if="isvideo==false">
                    <img :src="videoData.pic" alt="" class="icls">
                </div>
            </div>
            <div class="fonts">{{videoData['name_'+lang]}}</div>
            <div class="carddemand">
                <h1>{{$t('m.VideoVerificationRequirements')}}</h1>
                <div class="tsp">{{$t('m.text8')}}<span class="blur">{{$t('m.text9')}}</span>{{$t('m.text10')}}</div>
                <div class="tsp">{{$t('m.text11')}}<span class="blur">{{$t('m.text12')}}</span></div>
                <span>
                    <img src="@/assets/img14_en.png" alt="" class="noneImg" v-if="lang == 'en'">
                    <img src="@/assets/img14_tc.png" alt="" class="noneImg" v-if="lang == 'tc'">
                    <img src="@/assets/img14.png" alt="" class="noneImg" v-else>
                </span>
            </div>
            <next-back @NextClick="NextClick" @PrevClick="PrevClick"></next-back>
        </div>
    </div>
</template>
<script>
    import openAccountPregress from "@/components/assembly/openAccountProgress.vue";
    import NextBack from "@/components/inc/NextBack.vue"
    import {pageFlow,BtnsFlow,uploads,submit,getsubscript} from "@/common/common";
    export default {
        components: {openAccountPregress,NextBack},
        data() {
            return{
                videoUrl:"",
                flowinfo:{},
                loading:false,
                lang:sessionStorage.getItem("lang")=='zh-CN'?'zh':sessionStorage.getItem("lang")=='zh-TW'?'tc':'en',
                num:0,
                videoData:{},
                videos:"",
                isvideo:false,
            };
        },
        mounted(){
            this.$nextTick(function(){
                this.flowinfo = JSON.parse(sessionStorage.getItem('flowInfo'))
                this.num = getsubscript(JSON.parse(sessionStorage.getItem('flowInfo')))
                this.getflow(this.flowinfo.page_flow[this.num]);
                this.getvideo();
                window.document.title = this.$t('m.CAvideo')
            })
        },
        methods:{
            getvideo(){
                var _this = this;
                _this.$axios.get('/open/check/video')
                .then(res => {
                    if(res.data.code == 1){
                        this.videoData =res.data.data  
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            uploadVideo(e){
                var _this = this;
                let files = e.target.files || e.dataTransfer.files;
                var formDate = new FormData();
                formDate.append("file", files[0]);
                var content = files[0]
                var url = URL.createObjectURL(content);
                var audioElement = new Audio(url);
                var duration;
                audioElement.addEventListener("loadedmetadata", function (_event) {
                    duration = audioElement.duration.toFixed(2);
                    if(duration <5 || duration >15){
                        _this.$message({
                            message: _this.$t('m.text35'),
                            type: "warning"
                        });
                        return false;
                    }
                    _this.loading = true;
                    uploads(formDate,res => {
                        var res = res.data;
                        if(res.code == 1){
                            _this.videoUrl = res.data.url;
                            _this.loading = false;
                            _this.isvideo = true;
                        }else if(res.code == 401){
                            _this.$router.replace({path:'/'})
                        }else{
                            this.$message({
                                message: res.msg,
                                type: "warning"
                            });
                        }
                    })
                });
            },
            getflow(page){
                var _this = this;
                pageFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(JSON.stringify(res.data.user_fill) !='{}'){
                            _this.videoUrl = res.data.user_fill.videoUrl;
                            _this.isvideo = true;
                        }
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else if(re.code == 102 || re.code == 103){
                        _this.$router.replace({path:'/examine'})
                    }else if(re.code == 104){
                        _this.$router.go(0)
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
            },
            NextClick(){
                var _this = this;
                if(_this.videoUrl == ""){
                    _this.$message({
                        message:_this.$t('m.Pleaseuploadthevideo'),
                        type: "warning"
                    })
                    return false;
                }
                var data = {
                    pageId:_this.flowinfo.page_info.id,
                    isModify:Number(sessionStorage.getItem("isModify"))==0?'':Number(sessionStorage.getItem("isModify")),
                    fields:{videoUrl:_this.videoUrl,legalizeType:1},
                }
                submit(data,res => {
                    var res = res.data;
                    if(res.code == 1){
                        if(_this.flowinfo.page_info.id == _this.flowinfo.page_flow[_this.flowinfo.page_flow.length - 1]){
                            _this.$router.replace({ path:'/examine'});
                        }else{
                            _this.BtnsFlowBtn()
                            //_this.flowinfo.page_flow[_this.num + 1]
                        }
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        _this.$message({
                            message: res.msg,
                            type: "warning"
                        })
                    }
                })
            },
            PrevClick(){
                var _this = this;
                if(_this.flowinfo.page_info.id == _this.flowinfo.page_flow[0]){
                    if(Number(sessionStorage.getItem('isModify')) == 1){
                        _this.$router.replace({ path:'/examine'});
                    }else{
                        _this.$router.replace({ path:'/documentType'});
                    }
                }else{
                    _this.BtnsFlowBtn(_this.flowinfo.page_flow[_this.num - 1])
                }
            },
            BtnsFlowBtn(page){
                var _this = this;
                console.log(page,'pages')
                BtnsFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(res.data.page_info.type==2){
                            _this.$router.replace({ path:'/custom?id='+res.data.page_info.id});
                        }else{
                            _this.$router.replace({ path:'/'+res.data.page_info.url_path});
                        }
                    }else if(res.code == 102){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
            }
        },
        watch:{}
    }
</script>
<style lang="less">
    .mainlandcard{
        .mainlandcardbox{
            width: 460px;
            margin:0 auto;
            h1{
                font-size: 20px;
                font-weight: bold;
                line-height:36px;
                color: @000;
            }
            .tsp{
                font-size: 14px;
                color: @titleColor;
                line-height:22px;
                .blur{
                    color: @hoverColor;
                }
            }
            .noneImg{
                margin-top: 24px;
                max-width: 100%;
            }
            .carddemand{
                padding-top:20px;
            }
            .uploadVideo{
                width: 201px;
                height: 201px;
                position: relative;
                border-radius:50%;
                margin: 20px auto 0;
                background:#f2f2f2;
                cursor: pointer;
                overflow: hidden;
                .videobg{
                    width: 100%;
                    height: 100%;
                    border-radius:50%;
                    background:rgba(255,255,255,.55) url(~@/assets/video01.png) no-repeat center;
                    background-size: 82px auto;
                    overflow: hidden;
                    position: absolute;
                    top:0;
                    left:0;
                    z-index: 2;
                }
                .icls{
                    max-width: 100%;
                    max-height: 100%;
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%);
                }
                input[type="file"]{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top:0;
                    left:0;
                    opacity: 0;
                    z-index: 3;
                    cursor: pointer;
                }
                #videoas{
                    max-width: 200%;
                    max-height: 200%;
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%);
                    z-index:1;
                    filter: blur(10px);
                }
                .idcardBg{
                    text-align: center;
                    width:80px;
                    position: absolute;
                    top:50%;
                    left:50%;
                    margin:-48px 0 0 -40px;
                    img{
                        width:70px;
                        display: block;
                        margin: 0 auto;
                    }
                    span{
                        font-size: 14px;
                        line-height: 14px;
                        color: @404040;
                        padding-top: 11px;
                        display: block;
                    }
                }
                .el-loading-mask{
                    background: none;
                    .el-loading-spinner{
                        top: 0;
                        margin-top:77.5px;
                    }
                }
                
            }
            .fonts{
                font-size:14px;
                color: @hoverColor;
                text-align: center;
                line-height:34px;
            }
        }
    }
</style>